<template>
    <view style="height: 100%">
        <swiper class="detail-swiper" :indicator-dots="true" :circular="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff" :autoplay="true" interval="5000">
            <swiper-item v-for="(item, index) in info.images" :key="index">
                <image mode="aspectFill" class="swiper-detail"  referrerPolicy='no-referrer' :src="item" />
            </swiper-item>
        </swiper>
        <!-- 名称 -->
        <view class="bgcf pd15">
            <view class="df ac">
                <h2 class="cff8 f600 f20">
                    <span class="f14 f500">¥</span>
                    {{ info.price }}
                </h2>
                <p class="f14 cff8 ml8">(未含税)</p>
                <!-- <p class="tag tag1 ml8 mt2">送积分</p> -->
            </view>
            <p class="db f18 c28 f600 mt10">{{ info.title }}</p>
            <view class="df ac mt10">
                <p class="f12 c9d w140">库存：{{ info.stock }}件</p>
                <p class="f12 c9d f1">运费：¥{{ info.express_fee }}</p>
                <button class="share-bu1 df ac jc" open-type="share">
                    <image src="https://wx.xtwaixie.com/img/fx.png" />
                    <span class="f12 c9d">分享</span>
                </button>
            </view>
        </view>
        <!-- 尺寸 -->
        <view class="bgcf pd15 mt10 df">
            <h2 class="f14 c9d">选择</h2>
            <view class="f1 ml20" @tap="onShowAdd" :data-type="0">
                <view class="df ac sb">
                    <P class="f14 c28 f500">尺寸</P>
                    <image class="more" src="https://wx.xtwaixie.com/img/more.png" />
                </view>
                <ul class="df ac mt8 fw">
                    <li class="tag2 mb5">{{ info.sizeSku[0].sku_title }}</li>
                    <li class="tag2 mb5">{{ info.sizeSku[1].sku_title }}</li>
                    <li class="tag2">共{{ info.sizeSku.length }}种尺寸可选</li>
                </ul>
            </view>
        </view>
        <!-- 评论 -->
        <view class="bgcf pd015 mt10">
            <navigator class="pd150 bbf1 df ac sb" :url="'/pages/order/comment?id=' + id" hover-class="none" open-type="navigate">
                <p class="f16 f600 c28">商品评价</p>
                <view class="df ac">
                    <p class="f14 c9d">{{ comm_info.count }}条评价</p>
                    <image class="more ml6" src="https://wx.xtwaixie.com/img/more.png" />
                </view>
            </navigator>
            <view class="pd150" v-if="comm_info.count != 0">
                <view class="df">
                    <image class="img40 br50 mr12"  referrerPolicy='no-referrer' :src="comm_info.comment[0].avatar" />
                    <view class="f1">
                        <p class="f14 c28 f600 db">{{ comm_info.comment[0].username }}</p>
                        <span class="f12 c9d db mt2">{{ comm_info.comment[0].created_at }}</span>
                    </view>
                </view>
                <p class="db f14 c28 mt12">{{ comm_info.comment[0].content }}</p>
            </view>

            <view class="pd150" v-else>
                <P class="tc db f14 c9">暂时还没有评论哦~</P>
            </view>
        </view>

        <!-- 详情 -->
        <view class="bgcf mt10">
            <view class="pd15 f16 c28 f600">商品详情</view>
            <rich-text class="content" :nodes="content"></rich-text>
        </view>

        <!-- 底部 -->
        <view class="pob pd715 btf1">
            <view class="df ac sb">
                <view class="df ac">
                    <button class="tc kf-but" open-type="contact">
                        <image class="img18" src="https://wx.xtwaixie.com/img/kf.png" />
                        <p class="db f10 c6b f400">客服</p>
                    </button>
                    <navigator url="/pages/cart/cart" hover-class="navigator-hover" open-type="reLaunch" class="tc w30 ml20">
                        <image class="img18" src="https://wx.xtwaixie.com/img/car1.png" />
                        <p class="db f10 c6b">购物车</p>
                    </navigator>
                </view>
                <view class="df ac">
                    <view class="buy-but" @tap="onShowAdd" :data-type="0">加入购物车</view>
                    <view class="buy-but ml8 bgc10" @tap="onShowAdd" :data-type="1">立即购买</view>
                </view>
            </view>
        </view>

        <van-popup :show="show" round @close="onClose" position="bottom" closeable>
            <view class="pd015">
                <view class="df pd150 mt5">
                    <image class="img80"  referrerPolicy='no-referrer' :src="info.thumb" />
                    <view class="ml15 f1 df fc jc">
                        <view class="df ac">
                            <p class="f16 cff8 f600">¥{{ price }}</p>
                            <p class="f12 cff8 ml8">(未含税)</p>
                            <!-- <p class="tag tag1 ml8 mt2">送积分</p> -->
                        </view>
                        <P class="f12 c9d db mt3">库存：{{ stock }}件</P>
                        <P class="f12 c28 db mt2" v-if="act_list[0].name || act_list[1].name">
                            已选：
                            <span v-if="act_list[0].name">“{{ act_list[0].name }}”</span>
                            <span v-if="act_list[1].name">“{{ act_list[1].name }}”</span>
                        </P>
                    </view>
                </view>
                <scroll-view :scroll-y="true" style="max-height: 400rpx">
                    <P class="db f12 c28">尺寸</P>
                    <ul class="df ac fw mt3">
                        <block v-for="(item, index) in info.sizeSku" :key="index">
                            <li
                                :class="'tag2 mt8 ' + (act_list[0].act == item.id ? 'tag-act' : '')"
                                @tap.native="onSizeAct($event, { type: 0, name: item.sku_title, id: item.id })"
                                :data-type="0"
                                :data-name="item.sku_title"
                                :data-id="item.id"
                            >
                                {{ item.sku_title }}
                            </li>
                        </block>
                    </ul>
                </scroll-view>

                <scroll-view :scroll-y="true" style="max-height: 400rpx">
                    <view class="mt20">
                        <P class="db f12 c28">类型</P>
                        <ul class="df ac fw mt3">
                            <block v-for="(item, index) in info.colorSku" :key="index">
                                <li
                                    :class="'tag2 mt8 ' + (act_list[1].act == item.id ? 'tag-act' : '')"
                                    @tap.native="onSizeAct($event, { type: 1, name: item.sku_title, id: item.id })"
                                    :data-type="1"
                                    :data-name="item.sku_title"
                                    :data-id="item.id"
                                >
                                    {{ item.sku_title }}
                                </li>
                            </block>
                        </ul>
                    </view>
                </scroll-view>

                <!-- 数量 -->
                <view class="btf1 bbf1 pd150 df ac sb mt15">
                    <p class="f12 c28">数量</p>
                    <view class="df ac">
                        <image class="img20" src="https://wx.xtwaixie.com/img/normal.png" @tap="normal" />
                        <input class="add-input" :value="num" type="number" @input="onInput" />
                        <image class="img20" src="https://wx.xtwaixie.com/img/add.png" @tap="add" />
                    </view>
                </view>
                <!-- 运费 -->
                <view class="pd150 df ac sb">
                    <p class="f12 c28">运费</p>
                    <p class="f12 c28">¥{{ info.express_fee }}</p>
                </view>

                <view class="mt20 mb10">
                    <button class="sub" @tap="onSuer">确定</button>
                </view>
            </view>
        </van-popup>

        <!-- bindtap='onBuy' -->
    </view>
</template>

<script>
const http = require('../../utils/http');

// pages/order/shopDetail.js
export default {
    data() {
        return {
            show: false,
            id: '',

            info: {
                images: [],
                title: '',
                stock: '',
                express_fee: '',
                sizeSku: '',
                thumb: '',
                colorSku: []
            },

            comm_info: {
                count: '',
                comment: ''
            },

            act_list: [
                {
                    act: '',
                    name: ''
                },
                {
                    act: '',
                    name: ''
                }
            ],

            num: 1,
            is_type: '',
            price: 0,
            stock: 0,
            content: '',
            sku_title: '',
            avatar: '',
            username: '',
            created_at: '',
            name: '',
            act: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            id: options.id
        });
		this.id=options.id
        this.getInfo(options.id);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        return {
            title: this.info.title,
            path: '/pages/order/shopDetail?id=' + this.id
        };
    },
    methods: {
        onInput(e) {
            this.setData({
                num: Number(e.detail.value)
            });
        },

        //  确认
        onSuer() {
            let is_login = uni.getStorageSync('is_login');
            let type = this.is_type;
            if (is_login == 204 || is_login == 205) {
                uni.showToast({
                    title: '您还没登录，请先登录',
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    });
                }, 1500);
            } else {
                if (type == 0) {
                    this.onAddCart();
                } else if (type == 1) {
                    this.onBuy();
                }
            }
        },

        // 加入购物车
        onAddCart() {
            let data = {
                goods_id: this.id,
                number: this.num,
                type: 1,
                size_id: this.act_list[0].act,
                color_id: this.act_list[1].act
            };
            http.request('cart/cartAdd', data)
                .then((res) => {
                    uni.showToast({
                        title: '加入成功'
                    });
                    this.setData({
                        show: false
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        // 去购买
        onBuy() {
            let id = this.id;
            let number = this.num;
            let size_id = this.act_list[0].act;
            let color_id = this.act_list[1].act;
            uni.navigateTo({
                url: '/pages/order/suerOrder?id=' + id + '&number=' + number + '&size_id=' + size_id + '&color_id=' + color_id
            });
        },

        // 获取信息
        getInfo(id) {
            http.request('goods/goodsInfo', {
                id
            })
                .then((res) => {
                    let content = res.data.info.content.replace(/<img/g, '<img class="rich-text-img"');
                    this.setData({
                        info: res.data.info,
                        comm_info: res.data.comment,
                        content: content,
                        [`act_list[0].act`]: res.data.info.sizeSku.length!==0 ? res.data.info.sizeSku[0].id : '',
                        [`act_list[0].name`]: res.data.info.sizeSku.length!==0 ? res.data.info.sizeSku[0].sku_title : '',
                        [`act_list[1].act`]: res.data.info.colorSku.length!==0 ? res.data.info.colorSku[0].id : '',
                        [`act_list[1].name`]: res.data.info.colorSku.length!==0 ? res.data.info.colorSku[0].sku_title : ''
                    });
					console.log(res.data.info);
                    this.getPrice();
                })
                .catch((res) => {
                    console.log(res);
                });
        },

        //  获取价格
        getPrice() {
            let data = {
                size_id: this.act_list[0].act,
                color_id: this.act_list[1].act,
                id: this.id
            };
            http.request('goods/getGoodsPrice', data)
                .then((res) => {
                    this.setData({
                        price: res.data.price,
                        stock: res.data.stock
                    });
                })
                .catch((res) => {
                    console.log(res);
                });
        },

        onShowAdd(e) {
            let type = e.currentTarget.dataset.type;
            this.setData({
                show: true,
                is_type: type
            });
        },

        onSizeAct(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let type = e.currentTarget.dataset.type;
            let id = e.currentTarget.dataset.id;
            let name = e.currentTarget.dataset.name;
            this.setData({
                [`act_list[${type}].act`]: id,
                [`act_list[${type}].name`]: name
            });
            this.getPrice();
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        normal() {
            let num = this.num;
            if (num <= 1) {
                uni.showToast({
                    title: '不能在减少了~',
                    icon: 'none'
                });
            } else {
                num = num - 1;
                this.setData({
                    num: num
                });
            }
        },

        add() {
            let num = this.num;
            let stock = this.info.stock;
            if (num >= stock) {
                uni.showToast({
                    title: '超过库存了~',
                    icon: 'none'
                });
            } else {
                num = num + 1;
                this.setData({
                    num: num
                });
            }
        }
    }
};
</script>
<style>
@import './shopDetail.css';
</style>
